*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{

    background:#333;
   
}
h1{
    font-size:100px;
    position:absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    color:white;
    opacity: 0;
    transition:0.3s linear 0.3s;
}
.main{
    position: absolute;;
    width:800px;
    height:600px;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    
}
.main div{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    transition:0.3s;
}
.main div.img1{
    background:url("iceland-5586225_1920.jpg");
    background-position-x: -80px;
    background-size: cover;
    clip-path: polygon(0 0, 45% 0, 22% 100%, 0% 100%);
}
.main div.img2{
    background:url("nutcracker-5767159_1920.jpg");
    background-position-x: -50px;
    background-size: cover;
    clip-path: polygon(44% 0, 86% 0, 64% 100%, 22% 100%);
}
.main div.img3{
    background:url("lindau-5794639_1920.jpg");
    background-size: cover;
    clip-path: polygon(86% 0%,100% 0%,100% 100%,60% 100%);
}
.main:hover div{
    
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}
.main div:hover{
    clip-path: polygon(0% 0%,100% 0%,100% 100%,0% 100%);
}
.main:hover{
    box-shadow: 0 0 20px gray;
}
.main div:hover h1{
    opacity: 1;
    text-shadow: 0 0 20px red;
}